<template>
  <div class="publicBox" id="shoperNewbuildCss">

<el-form ref="form" :model="ruleForm" :rules="rules" class="demo-form-inline publicEditFrom" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
       <p v-if="!disabledFlag">门店管理/新增</p>
               <p v-else>门店管理/编辑</p>
               
     </div>
</el-row>

<el-row v-if="disabledFlag">
         <el-form-item label="门店编号" >
                 <p>{{rowData.no}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="门店名称" prop="name">
                 <el-input class="pubSerIpt" v-model="ruleForm.name" v-if="!disabledFlag"  placeholder="请输入门店名称"></el-input>
                 <p v-else>{{ruleForm.name}}</p>
       </el-form-item>
</el-row>

<el-row>
        <el-form-item label="所在区域" class="label_right" prop="areaid">
        <el-select v-model="ruleForm.areaid" v-if="!disabledFlag"   filterable  placeholder="富士康龙华北区" class="pubSlt200">
            <el-option
            v-for="item in getselect"
            :key="item.id"
            :label="item.name"
            :value="item.id" 
            >
            </el-option>
        </el-select>
        <p v-else>{{ruleForm.areaid}}</p>
        </el-form-item>
</el-row>

<el-row>
         <el-form-item label="详细地址" prop="address">
                 <el-input class="pubIptL" v-model="ruleForm.address" v-if="!disabledFlag"  placeholder="请输入楼名"></el-input>
                 <el-input class="pubIptS" v-model="ruleForm.building " v-if="!disabledFlag"  placeholder="栋数"></el-input><span v-if="!disabledFlag">栋</span>
                 <el-input class="pubIptS" v-model="ruleForm.layer" v-if="!disabledFlag"  placeholder="层数"></el-input><span v-if="!disabledFlag">层</span>
                 <p v-else>{{ruleForm.detailed}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="门店经纬度" prop="coordinate">
                 <el-input class="pubSerIpt" v-model="ruleForm.coordinate" v-if="!disabledFlag"  placeholder="请输入门店经纬度"></el-input>
                 <p v-else>{{ruleForm.coordinate}}</p>
                 <a v-if="!disabledFlag"  style="color:#617ADA; cursor: pointer;" @click="CheckLongitude">经纬度查询</a>
       </el-form-item>
       
</el-row>

<el-row>
         <el-form-item label="负责人" prop="principal">
                 <el-input class="pubSerIpt" v-model="ruleForm.principal"  placeholder="请输入该门店负责人"></el-input>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="联系电话" prop="phone">
                 <el-input class="pubSerIpt" v-model="ruleForm.phone"  placeholder="请输入负责人联系电话"></el-input>
       </el-form-item>
</el-row>

<el-row class="pubSubmitBtn-row">
           <el-form-item>
                         <el-button class="pubBtnGree" type="primary" @click="submitForm">提交</el-button>
                         <el-button class="pubBtnGray" @click="canCleFn"  type="primary">取消</el-button>
       </el-form-item>
</el-row>

</el-form>
    
  </div>
</template>

<script>
import * as Api from "@api/shop.js"
export default {
  components: {

  },
  data() {
    return {
        rowData:"",
        getselect: [],
        disabledFlag:false,
        
     ruleForm:{
      name:"",
      address:"",
      areaid:"",
      coordinate:"",
      principal:"",
      phone:"",
      layer:"",
      building:""
     },
      rules: {
          name: [
            { required: true, message: '请输入门店名称', trigger: 'blur' }
          ],
          address: [
            {required: true, message: '请输入门店地址', trigger: 'blur' }
          ],
          areaid: [
            {required: true, message: '请选择区域', trigger: 'blur' }
          ],
          principal: [
            {required: true, message: '请输入负责人名称', trigger: 'blur' }
          ],
          phone: [
            {required: true, message: '请输入负责人手机号码', trigger: 'blur' }
          ],
          coordinate: [
            {required: true, message: '请输入名店经纬度', trigger: 'blur' }
          ],
        }
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    CheckLongitude(){
      window.open("https://lbs.amap.com/console/show/picker"); 
    },
       canCleFn(){
           this.$router.go(-1)
       },
       submitForm() {
           this.$refs["form"].validate((valid) => {
            if (valid) {
                    this.addshopApi()
            } else {
              console.log('error submit!!');
              return false;
            }
        });
       },
       async addshopApi(){
         let res=""
         if(this.disabledFlag){  //修改
              this.ruleForm.id=this.rowData.id
              res= await Api.editshopApi(this.ruleForm)
           }else{  //新增
              res= await Api.addshopApi(this.ruleForm)
           }
            if(res.IsPositive){
              this.$message.success({message:"操作成功"})
              this.$router.push({path:'/platform/shop/shoper'})
            }else{
              this.$message.error({message:res.ErrorCode})
            }
       }

  },
  async created() {
      this.getselect = await this.$getSelect(true)
    if(Object.keys(this.$route.query).length>0){              //ES6写法, Object.keys(targetObject)  将对象的key作为一个数组返回
                  this.disabledFlag=true        //true代表修改数据
                  this.rowData=this.$route.query.data
                  this.ruleForm={
                           phone:this.rowData.phone, 
                           name:this.rowData.name, 
                           detailed:this.rowData.detailed, 
                           areaid:this.rowData.areaid, 
                           coordinate:this.rowData.coordinate, 
                           principal:this.rowData.principal
                  }
        }


  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less'>


</style>